<template>
    <div class="trickMain-wrap">
        <div class="top">
          <el-input placeholder="出发城市" size="small" v-model="before"></el-input>
          <el-input placeholder="到达城市" size="small" v-model="after"></el-input>
          <el-date-picker type="datetime" placeholder="去程" size="small"></el-date-picker>
          <el-date-picker type="datetime" placeholder="返程" size="small"></el-date-picker>
          <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
        </div>
        <div class="left" v-loading="loading" element-loading-text="拼命加载中">
            <div class="title">
                您的出发地：{{before}} 
            </div>
            <div class="ul">
                <div>
                    <el-menu default-active="1" class="el-menu-demo" mode="horizontal" background-color="#eeeeee">
                        <el-menu-item index="5" v-for="i in 7" :key="i"><span>07-31 周六</span></el-menu-item>
                        <el-button type="info" plain class="btn">低价日历</el-button>
                    </el-menu>
                </div>
            </div>
            <div class="card" v-for="(item,i) of trickHomeAirpost" :key="i">
                <div class="name"><span>{{item.nickname}}</span><div>{{item.lable}}</div></div>
                <div class="before"><span>{{item.startTime}}</span><div>{{item.startAirport}}</div></div>
                <div class="time"><span>{{item.timer}}</span></div>
                <div class="after"><span>{{item.endTime}}</span><div>{{item.endAirport}}</div></div>
                <div class="price">{{item.price}}</div>
                <el-button type="primary" size="small" class="tbtn" @click="buyorder(trickHomeAirpost[i])">订票</el-button>
            </div>
            <div class="page">
                <span>共{{num}}条/{{page}}页</span>
                <el-button type="primary" size="small" class="pbtn" @click="down">下一页>></el-button>
            </div>
        </div>
        <div class="right">
            <div class="box1">
                <div class="img1"></div>
                <div class="img2"></div>
                <div class="img3"></div>
                <div>
                    <span>航协认证</span>
                    <span>出行保证</span>
                    <span>7x24</span>
                </div>
            </div>
            <div class="phone">
                免费客服电话：10086
            </div>
            <div class="banner">
                <img src="https://b1-q.mafengwo.net/s15/M00/C4/76/CoUBGV4O9suAX0ViAAHIIQPFJ1s41.jpeg" alt="">
            </div>
           <div class="img" v-for="(item1,i) of trickHomeImg" :key="i" @click="details()">
                <div>
                    <img :src="item1.img" alt="">
                    <div><span class="span1">{{item1.lable}}</span><span class="span2">{{item1.price}}</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'WorkspaceJsonTicketmain',

    data() {
        return {
            before:"",
            after:"",
            trickHomeAirpost:[],
            num:"",
            page:"",
            trickHomeImg:"",
            mid:1,
            loading:true,
        };
    },

    mounted() {
        this.before=this.$route.query.address,
        this.http(this.mid,this.before)
        this.$http.get("/trickHomeImg").then(result=>{
            this.trickHomeImg=result.data.data
        })
        window.scrollTo(0,0)
    },

    methods: {
         open(){
            this.$message({
            message: '网络异常，请稍后再试',
            type: 'warning',
            offset:100
            });
        },
        timer(){
            setTimeout(()=>{
              if(this.loading){
                this.open()
                this.loading=false
              }else{
                  return
              }
            },5000)
        },
        details(){
            this.http(this.mid,"北京")
        },
        http(mid,address){
            this.loading=true
            this.timer()
            this.$http.post("/trickHomeAirpost",{mid:mid,address:address}).then(result=>{
                if(result.data.data.length==0){
                    this.$http.post("/trickHomeAirpost",{mid:mid,address:"上海"}).then(result=>{
                        this.num=result.data.num[0].num
                        this.page=result.data.pages
                        this.after= result.data.data.endAirport
                        this.trickHomeAirpost=result.data.data
                        this.loading=false
                    })
                }else{
                    this.num=result.data.num[0].num
                    this.page=result.data.pages
                    this.after= result.data.data.endAirport
                    this.trickHomeAirpost=result.data.data
                    this.loading=false
                }
            })
        },
        down(){
            if(this.mid>= parseInt( this.page)){
                return
            }
            this.http(++this.mid,this.before)
        },
        search(){
            this.$router.push({path:"/ticket/detail",query:{mid:1,address:this.before}})
            this.http(1,this.before)
        },
        buyorder(params){
            // let data = JSON.stringify(params)
            this.$router.push({path:'/ticket/order',query:{data:params}})
        }
    },
};
</script>

<style lang="scss" scoped>
.trickMain-wrap{
    width: 1200px;
    min-height: 800px;
    margin: 0 auto;
    text-align:center;
    overflow: hidden;
    .top{
        width: 100%;
        height: 75px;
        margin: 0 auto;
        background-color: #f5f5f5;
        .el-input--small{
            margin-left:20px;
            margin-top:20px;
            width:200px
        }
        .el-button--small, .el-button--small.is-round{
            margin-left:20px;
            width:150px;
            background-color:#41c1ec;
        }
    }
    .left{
        width: 70%;
        float: left;
        margin-top: 15px;
        overflow: hidden;
        margin-bottom: 20px;
        .title{
            float: left;
            margin-top: 10px;
        }
        .ul{
            margin-top: 40px;
            box-sizing: border-box;
            border:1px solid #ddd;
            div{
                .btn{
                    width: 30px;
                    background-color: #eeeeee;
                    border: 0;
                    margin-left: -50px;
                    margin-top: 12px;
                    margin-right: 10px;
                    color: #808080;
                }
            }
        }
        .card{
            margin-top: 10px;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #ddd;
            height: 110px;
            padding-bottom: 50px;
            .name{
                margin-top: 30px;
                margin-left: -630px;

                span{
                    font-size: 18px;
                }
                div{
                    font-size: 15px;
                    color: #808080;
                }
            }
            .before{
                margin-top: -45px;
                margin-left: -300px;
                span{
                    font-size: 20px;
                }
                div{
                    font-size: 15px;
                    color: #808080;
                }
            }
            .time{
                width: 100px;
                height: 25px;
                border-bottom: 1px solid #a7a7a7;
                margin-top: -35px;
                font-size: 15px;
                color: #808080;
                margin-left: 325px;
            }
            .after{
                margin-top: -37px;
                margin-left: 130px;
                span{
                    font-size: 20px;
                }
                div{
                    font-size: 15px;
                    color: #808080;
                }
            }
            .price{
                margin-top: -40px;
                font-size: 25px;
                color: red;
                margin-left: 400px;
                span{
                    font-size: 15px;
                    color: #808080;
                }
            }
            .tbtn{
                display: block;
                margin-top: -30px;
                margin-left: 710px;
                width: 100px;
                height: 30px;
                background-color: #41c1ec;
            }
        }    
        .page{
            margin-top: 20px;
            float: right;
            margin-right: 35px;
            span{
                font-size: 15px;
                color: #808080;
            }
            .pbtn{
                height: 30px;
                background-color: #41c1ec;
                margin-left: 20px;
            }
        }    
    }
    .right{
        width: 30%;
        height: 1000px;
        float: right;
        margin-top: 15px;
        .box1{
            border: 1px solid #ddd;
            height: 110px;
            width: 80%;
            margin: 0 auto;
            text-align: center;
            box-sizing: border-box;
            border-bottom: 0;
            .img1{
                margin-top: 20px;
                display: inline-block;
                background: url("../../../assets/five/2.png") 0 -90px no-repeat;
                background-size: auto;
                width: 40px;
                height: 34px;
                // margin-left: 40px;
            }
            .img2{
                margin-top: 20px;
                display: inline-block;
                background: url("../../../assets/five/2.png") 0 -90px no-repeat;
                background-size: auto;
                width: 40px;
                height: 34px;
                margin-right: 50px;
                margin-left: 60px;
                background-position: -60px -90px;
            }
            .img3{
                margin-top: 20px;
                display: inline-block;
                background: url("../../../assets/five/2.png") 0 -90px no-repeat;
                background-size: auto;
                width: 40px;
                height: 34px;
                background-position: -120px -90px;
            }
            div{
                margin-top: 10px;
                span:nth-child(1){
                    margin-left: -15px;
                }
                span:nth-child(2){
                    margin-left: 30px;
                }
                span:nth-child(3){
                    margin-left: 35px;
                }
            }
        }
        .phone{
            width: 80%;
            height: 30px;
            background-color: rgb(245, 245, 245);
            margin: 0 auto;
            text-align: center;
            font-size: 15px;
            line-height: 30px;
            border: 1px solid #ddd;
            box-sizing: border-box;
            border-top: 0;
        }
        .banner{
            width: 80%;
            margin: 0 auto;
            margin-top: 20px;
            overflow: hidden;
            margin-bottom: 15px;
            img{
                width: 288px;
            }
        }
        .img{
        div{
            height: 180px;
            overflow: hidden;
            margin-bottom: 15px;
            cursor: pointer;
            img{
                width: 288px;
            }
            div{
                margin-top: -65px;
                color: white;
                background-color: black;
                opacity: 0.7;
                width: 288px;
                margin-left: 36px;
                .span1{
                    margin-left: 10px;
                    font-size: 20px;
                }
                .span2{
                    font-size: 20px;
                    margin-left: 100px;
                }
            }
        }
        }
    }
    .el-menu--horizontal>.el-menu-item.is-active{
        border-bottom:0 ;
    }
}
</style>